<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="-">
                <el-breadcrumb-item replace>积分管理</el-breadcrumb-item>
                <el-breadcrumb-item replace>添加任务</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <p class="back">
                    <span>请输入任务信息</span>
                    <el-button type="primary" @click="handleBack">返回</el-button>
                </p>
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="任务名称">
                        <el-input
                            :disabled="disabled"
                            placeholder="请输入活动名称"
                            clearable
                            v-model.trim="query.name"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>
                    <br />
                    <el-form-item label="任务有效期">
                        <div class="block">
                            <el-date-picker
                                :disabled="disabled"
                                @change="handleChange"
                                v-model="query.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <br />
                    <el-form-item label="积分规则">
                        <el-input
                            :disabled="disabled"
                            placeholder="收藏5首歌曲"
                            clearable
                            v-model.trim="query.collection"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="获得">
                        <el-input
                            :disabled="disabled"
                            placeholder="5"
                            clearable
                            v-model.trim="query.score"
                            class="handle-input mr10"
                        ></el-input>
                        积分。
                    </el-form-item>
                    <br />
                    <el-form-item label="每天最高获得">
                        <el-input
                            :disabled="disabled"
                            placeholder="10"
                            clearable
                            v-model.trim="query.scoreLimit"
                            class="handle-input mr10"
                        ></el-input>
                        积分。
                    </el-form-item>
                    <br />
                    <el-form-item label="人群限制">
                        <el-radio :disabled="disabled" v-model="query.memberLimit" :label="1">所有</el-radio>
                        <el-radio :disabled="disabled" v-model="query.memberLimit" :label="2">新注册会员</el-radio>
                        <el-radio :disabled="disabled" v-model="query.memberLimit" :label="3">会员</el-radio>
                    </el-form-item>

                    <br />

                    <el-form-item label="渠道">
                        <el-radio :disabled="disabled" v-model="query.channelType" label="10">所有</el-radio>
                        <el-radio :disabled="disabled" v-model="query.channelType" label="20">APP端</el-radio>
                        <el-radio :disabled="disabled" v-model="query.channelType" label="30">H5端</el-radio>
                    </el-form-item>
                    <br />

                    <el-form-item label="跳转链接">
                        <el-input
                            :disabled="disabled"
                            placeholder="请输入完整网址"
                            clearable
                            v-model.trim="query.forwardUrl"
                            class="handle-input mr10"
                        ></el-input>
                        不填默认跳首页
                    </el-form-item>
                    <br />
                    <el-button v-if="!disabled" type="primary" @click="handleSave">确认</el-button>
                    <el-button v-if="!disabled" type="default">取消</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AddTask',
    data() {
        return {
            disabled: false,
            query: {
                id: null,
                name: '',
                date: null,
                startTime: null,
                endTime: null,

                score: '',
                scoreLimit: '',
                collection: '',
                memberLimit: '',
                forwardUrl: '',
                channelType: ''
            },
            form: {}
        };
    },
    activated() {
        console.log(this.$route.query);
        if (this.$route.query.id && !Boolean(parseInt(this.$route.query._))) {
            // 编辑操作
            this.getDataById(this.$route.query.id);
            this.disabled = Boolean(parseInt(this.$route.query._));
        } else if (this.$route.query.id && Boolean(parseInt(this.$route.query._))) {
            // 查看操作
            this.getDataById(this.$route.query.id);
            this.disabled = Boolean(parseInt(this.$route.query._));
        } else {
            // 新增操作
        }
    },
    methods: {
        handleChange(date) {
            console.log(date);
            if (date != null) {
                this.query.startTime = this.$standardDateToLocal(date[0], '', '-');
                this.query.endTime = this.$standardDateToLocal(date[1], '', '-');
            } else {
                this.query.startTime = null;
                this.query.endTime = null;
            }
            // this.handleSearch();
        },
        handleSave() {
            this.$confirm('确定提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    if (this.$route.query.id && !Boolean(parseInt(this.$route.query._))) {
                        // 编辑操作
                        this.query.id = this.$route.query.id;
                        this.query.startTime = this.$standardDateToLocal(this.query.date[0], '', '-');
                        this.query.endTime = this.$standardDateToLocal(this.query.date[1], '', '-');

                        this.save('/score/save/task');
                    } else {
                        // 新增操作
                        this.query.id = null;
                        this.save('/score/save/task');
                    }
                })
                .catch(() => {});
        },
        async save(url) {
            try {
                const { data: res } = await this.$http[0].post(url, {
                    id: this.query.id,
                    name: this.query.name,
                    startTime: this.query.startTime,
                    endTime: this.query.endTime,
                    score: this.query.score,
                    scoreLimit: this.query.scoreLimit,
                    remark: `${this.query.collection},获得${this.query.score}积分,每天最高获得${this.query.scoreLimit}积分`,
                    memberLimit: this.query.memberLimit,
                    channelType: this.query.channelType,
                    // amount
                    // totalAmount
                    forwardUrl: this.query.forwardUrl
                });
                console.log(res);
                this.$message.success(res.message);
                this.$router.replace({
                    path: '/integral/get'
                });
                if (this.$route.query.id && !Boolean(parseInt(this.$route.query._))) {
                    // 编辑操作
                } else {
                    // 新增操作
                    this.query = {
                        name: '',
                        date: null,
                        startTime: null,
                        endTime: null,

                        score: '',
                        scoreLimit: '',
                        collection: '',
                        memberLimit: '',
                        forwardUrl: '',
                        channelType: ''
                    };
                }
            } catch (err) {
                console.dir(err);
            }
        },
        handleBack() {
            this.$router.replace({
                path: '/integral/get'
            });
        },
        // 获取 easy-mock 的模拟数据
        async getDataById(id_) {
            try {
                const url = '/score/task/info';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        id: id_
                    }
                });
                // 解构
                let { id, name, startTime, endTime, score, scoreLimit, remark, memberLimit, channelType, forwardUrl } = res.data;
                // 中间处理
                var date = [this.$timstampToStandardDate(startTime), this.$timstampToStandardDate(endTime)];
                // 赋值
                this.query = {
                    name,
                    date,
                    startTime: null,
                    endTime: null,

                    score: score,
                    scoreLimit,
                    collection: remark.split(',')[0],
                    memberLimit,
                    forwardUrl,
                    channelType
                };
                console.log(res);
            } catch (err) {
                console.dir(err);
            }
        },

        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        }
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    .back {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        span {
            color: rgb(122, 122, 122);
            font-size: 16px;
        }
    }
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
